<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>鲜知校园-忘记密码</title>
    <link rel="stylesheet" href="/static/front/common/css/reset.css" />
    <link rel="stylesheet" href="/static/front/css/forgetPsd.css" />
    <link rel="stylesheet" href="/static/front/css/common.css" />
    <link rel="stylesheet" href="/static/layer_mobile/need/layer.css" />
    <script src="/static/front/common/js/jquery-1.12.4.min.js"></script>
    <script src="/static/layer_mobile/layer.js"></script>
</head>

<body>
    <div class="container">
        <div class="title">
            <p>忘记密码</p>
            <p>鲜知校园</p>
        </div>
        <div class="content">
            <form id="data-form">
                {{.xsrfdata}}
                <ul>
                    <li>
                        <label for="">手机号: </label>
                        <input type="number" maxlength="11" id="phone" name="phone">
                    </li>
                    <li class="code">
                        <label for="">验证码: </label>
                        <input type="text" id="verify_code" name="verify_code" style="width: 25vw;">
                    </li>
                    <div class="codeBtn">发送验证码</div>
                    <li>
                        <label for="">新密码: </label>
                        <input type="password" id="password" name="password">
                    </li>
                    <li>
                        <label for="">确认新密码: </label>
                        <input type="password" id="repeat_password" name="repeat_password">
                    </li>
                </ul>
            </form>
        </div>
        <div class="submit">
            <img src="/static/front/img/submit_white.png" alt="">
        </div>
    </div>
    <div class="back">
        <img src="/static/front/img/back.png" alt="">
    </div>
    <form id="phone-form">
        {{.xsrfdata}}
        <input type="hidden" id="mobile" name="mobile" value="">
    </form>
</body>

<script type="text/javascript">

    var canSubmit = true,
        mobileReg = reg = /^[1][3,4,5,7,8,9][0-9]{9}$/,
        seconds = 60,
        canRequestCode = true;

    $(function () {

        $(".back").click(function () {
            location.href = '{{urlfor "controllers.UserController.Login"}}';
        });

        $(".codeBtn").click(function () {

            var mobile = $('#phone').val();
            if (mobile.length <= 0) {
                layer.open({content: '请输入手机号', skin: 'msg', time: 2});
                return false;
            }
            if (!mobileReg.test(mobile)) {
                layer.open({content: '请输入正确的手机号', skin: 'msg', time: 2});
                return false;
            }
            $('#mobile').val(mobile);

            if (!canRequestCode) {
                return false;
            }

            canRequestCode = false;
            $('.codeBtn').text(seconds+'s');
            var getCodeLoadIndex = layer.open({type: 2});

            $.ajax({
                url: '{{urlfor "controllers.CommonController.SendMobileMsg"}}',
                type: 'POST',
                data: $('#phone-form').serialize(),
                dataType: 'json',
                success: function (res) {

                    layer.close(getCodeLoadIndex);
                    layer.open({content: res.msg, skin: 'msg', time: 2});

                }
            });

            var timer = setInterval(function () {
                seconds--;
                if (seconds > 0) {
                    $('.codeBtn').text(seconds+'s');
                } else {
                    $('.codeBtn').text('发送验证码');
                    canRequestCode = true;
                    clearInterval(timer);
                    seconds = 60;
                }
            }, 1000);

        });

        $(".submit").click(function () {

            var phone = $('#phone').val(),
                verifyCode = $('#verify_code').val(),
                password = $('#password').val(),
                repeatPassword = $('#repeat_password').val();

            if (phone.length <= 0) {
                layer.open({content: '请输入手机号', skin: 'msg', time: 2});
                return false;
            }
            if (!mobileReg.test(phone)) {
                layer.open({content: '请输入正确的手机号', skin: 'msg', time: 2});
                return false;
            }
            if (verifyCode.length <= 0) {
                layer.open({content: '请输入验证码', skin: 'msg', time: 2});
                return false;
            }
            if (password.length <= 0) {
                layer.open({content: '请输入新密码', skin: 'msg', time: 2});
                return false;
            }
            if (repeatPassword.length <= 0) {
                layer.open({content: '请再次输入新密码', skin: 'msg', time: 2});
                return false;
            }
            if (password != repeatPassword) {
                layer.open({content: '两次密码输入不一致', skin: 'msg', time: 2});
                return false;
            }

            if (!canSubmit) return false;
            var loadIndex = layer.open({type: 2});
            canSubmit = false;

            $.ajax({
                url: '{{urlfor "controllers.UserController.DoFindPassword"}}',
                type: 'POST',
                data: $('#data-form').serialize(),
                dataType: 'json',
                success: function (res) {

                    layer.close(loadIndex);
                    canSubmit = true;

                    layer.open({content: res.msg, skin: 'msg', time: 2});
                    if (res.status == 1) {
                        setTimeout(function () {
                            location.href = '{{urlfor "controllers.UserController.Login"}}';
                        }, 1000);
                    }

                }
            });

        });

    });

</script>

</html>